<script setup>
import { onMounted, ref } from 'vue';
import ChildTwo from './components/ChildTwo.vue'

const inpRef = ref(null)
const childRef = ref(null)

onMounted(()=>{
  // 1. 获取输入框, 让输入框聚焦
  // 会全局去找DOM元素
  // const inp = document.querySelector('input')
  // inp.focus()

  // 2. ref标识获取DOM元素
  // 只会在当前组件内查找
  // console.log(inpRef.value)
  inpRef.value.focus()

  // 3. 获取子组件内部的属性和方法
  console.log(childRef.value)
  console.log(childRef.value.car)
  console.log(childRef.value.logMsg)
  childRef.value.logMsg()
})

</script>

<template>
  <input ref="inpRef" type="text" placeholder="请输入用户名">
  <ChildTwo ref="childRef" />
</template>

<style scoped></style>
